<template>
  <div
    :key="2"
    class="register min-h-screen py-4 flex items-center bg-white bg-opacity-60"
  >
    <el-row
      type="flex"
      justify="center"
      class="w-full"
    >
      <el-col
        :xs="20"
        :sm="20"
        :md="18"
        :lg="18"
      >
        <el-card class="box-card">
          <div class="text-lg text-indigo-400 font-bold mb-4">
            注册
          </div>
          <div>
            <el-row :gutter="15">
              <el-form
                ref="form"
                :model="form.data"
                :rules="rule"
                size="medium"
                label-width="100px"
              >
                <el-col :span="24">
                  <el-form-item
                    label="账户名"
                    prop="username"
                  >
                    <el-input
                      v-model="form.data.username"
                      placeholder="4~16个字符，允许字母/数字/下划线"
                      :maxlength="16"
                      show-word-limit
                      clearable
                      prefix-icon="el-icon-user"
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="密码"
                    prop="pass"
                  >
                    <el-input
                      v-model="form.data.pass"
                      placeholder="8~64个字符，允许字母/数字/符号"
                      :maxlength="64"
                      show-word-limit
                      clearable
                      prefix-icon="el-icon-key"
                      show-password
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="16"
                >
                  <el-form-item
                    label="企业名"
                    prop="ename"
                  >
                    <el-input
                      v-model="form.data.ename"
                      placeholder="请输入企业名"
                      :maxlength="32"
                      show-word-limit
                      clearable
                      prefix-icon="el-icon-office-building"
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="8"
                >
                  <el-form-item
                    label="企业类型"
                    prop="etype"
                  >
                    <el-select
                      v-model="form.data.etype"
                      placeholder="请选择企业类型"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in this.$store.state.ent_type"
                        :key="index"
                        :label="item"
                        :value="index"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="12"
                >
                  <el-form-item
                    label="邮箱"
                    prop="email"
                  >
                    <el-input
                      v-model="form.data.email"
                      :maxlength="50"
                      clearable
                      prefix-icon="el-icon-message"
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="12"
                >
                  <el-form-item
                    label="电话"
                    prop="phone"
                  >
                    <el-input
                      v-model="form.data.phone"
                      placeholder="请输入电话"
                      :maxlength="11"
                      clearable
                      prefix-icon="el-icon-phone-outline"
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="16"
                >
                  <el-form-item
                    label="证书编号"
                    prop="lnum"
                  >
                    <el-input
                      v-model="form.data.lnum"
                      placeholder="请输入证书编号"
                      :maxlength="32"
                      clearable
                      prefix-icon="el-icon-document"
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :xs="24"
                  :sm="8"
                >
                  <el-form-item
                    label="证书类型"
                    prop="ltype"
                  >
                    <el-select
                      v-model="form.data.ltype"
                      placeholder="请选择证书类型"
                      clearable
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in this.$store.state.lic_type"
                        :key="index"
                        :label="item"
                        :value="index"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item
                    label="证书图片"
                    prop="lphoto"
                  >
                    <el-upload
                      ref="lphoto"
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                      :on-change="handleChange"
                    >
                      <i class="el-icon-plus" />
                      <div
                        slot="tip"
                        class="el-upload__tip"
                      >
                        只能上传不超过 2MB 的image/*文件
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item size="large">
                    <el-button
                      type="primary"
                      @click="submit"
                    >
                      注册
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </el-card>
        <div class="float-right text-indigo-400 mt-2 mr-4">
          <router-link to="/user/login">
            <i class="el-icon-user-solid" />
            登录
          </router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data () {
    return {
      form: {
        data: {
          username: undefined,
          pass: undefined,
          ename: undefined,
          etype: undefined,
          email: undefined,
          phone: undefined,
          lnum: undefined,
          ltype: undefined,
          lphoto: null
        }
      },
      rule: {
        username: [
          {
            required: true,
            message: '4~16个字符，允许字母/数字/下划线',
            trigger: 'blur'
          },
          {
            pattern: /^[\w\d_]{4,16}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        pass: [
          {
            required: true,
            message: '8~64个字符，允许字母/数字/符号',
            trigger: 'blur'
          },
          {
            pattern: /^[\w\d~!@#$%^&*_.-]{8,64}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        ename: [
          {
            required: true,
            message: '请输入企业名',
            trigger: 'blur'
          }
        ],
        etype: [
          {
            required: true,
            message: '请选择企业类型',
            trigger: 'change'
          }
        ],
        email: [
          {
            pattern: /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          {
            pattern: /^\d{6,11}$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ],
        lnum: [
          {
            required: true,
            message: '请输入证书编号',
            trigger: 'blur'
          }
        ],
        ltype: [
          {
            required: true,
            message: '请选择证书类型',
            trigger: 'change'
          }
        ],
        lphoto: [
          {
            required: true,
            message: '请上传',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleChange () {
      this.form.data.lphoto = 1
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/register', null, {
          params: {
            username: this.form.data.username,
            password: this.form.data.pass,
            etype: this.form.data.etype,
            tele: this.form.data.phone,
            ename: this.form.data.ename,
            email: this.form.data.email
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
          if (r.data.success) {
            this.axios.post('/api/ent/lic/add', null, {
              headers: {
                token: r.data.detail.token
              },
              params: {
                serNum: this.form.data.serNum,
                licType: this.form.data.licType
              }
            }).then(function (r) {
              this.$alert(r.data.msg)
            }.bind(this))
          }
        }.bind(this))
      })
    }
  }
}
</script>
